<template>
 <div class="sku" @touchstart="handleSkuShow" v-show="skuShow" >
     <div class="goods_info" @touchstart="handleStopProp">
         <div class="sku_header">
            <van-image src="https://img.yzcdn.cn/vant/apple-2.jpg" />
            <div class="goods_header_info">
                <p class="price"><label>￥100.00</label></p>
                <p class="num"><label>剩余数量：</label>123</p>
                <p class="state">
                    <label v-show="isActiveColor||isActiveSize">已选：</label>
                    <label v-show="!isActiveColor && !isActiveSize ">未选</label>
                    <span 
                    v-show="isActiveColor||isActiveSize">
                    <span v-show="isActiveColor">{{isActiveColor}}</span>
                    <span v-show="isActiveSize">，规格：{{isActiveSize}}</span>
                    </span></p>
            </div>
         </div>
            <div class="sku_main">
                <p>颜色：</p>
                <ul class="choose_color" >
                    <li v-for="(item,index) in colorArr" @click="handleSetColor(item)" :key="index" :class="[isActiveColor==item?'isActiveColor' : '']">{{item}}</li>
                </ul>
                <p>规格：</p>
                <ul class="choose_size">
                 <li v-for="(item,index) in sizeArr" :key="index" @click="handleSetSize(item)" :class="[isActiveSize==item?'isActiveColor' : '']">{{item}}</li>
                </ul>
               <p><span>数量：</span></p> 
               <p style="margin-top:10px;padding-left:10px"><van-stepper v-model="goods_num" min="0" max="8" /></p>
               <p style="margin-top:10px;"><span>商品质保：</span></p> 
                <ul class="choose_size">
                 <li>七天包退</li>
                 <li>三天包换</li>
                 <li>质量保证</li>
                </ul>
            </div>
     <div class="sku_footer">
         <van-goods-action>
  <van-goods-action-icon icon="chat-o" text="客服" @click="handleToCust" />
  <van-goods-action-icon icon="cart-o" text="购物车" @click="handletoShopCar" />
  <van-goods-action-button type="warning" text="加入购物车"  @click="handleAddGoods" />
  <van-goods-action-button type="danger" text="立即购买" @click="handleBuyGoods" />
</van-goods-action>
     </div>
     </div>

 </div>
</template>
 
<script>
 import store from '../store/index'
 import { mapMutations } from 'vuex';
export default {
    name:"sku",
    store,
   data() {
      return {
          colorArr:['红色','黑色','藏青','灰色'],
          sizeArr:['S','M','L','XL','XXL'],
          isActiveColor:'',
          isActiveSize:'',
          goods_num:'1'
      }
   },
   computed: {
      skuShow(){
          return store.state.skuShow
      }
   },
   methods: {
    ...mapMutations(["changeSkuShow"]),
      handletoShopCar(){

       },
        handleToCust(){

       },
        handleAddGoods(){
            console.log(12)
       },
        handleBuyGoods(){
            console.log(1)
            this.$router.push('/shopCar')
       },
       handleSetColor(item){
           this.isActiveColor=item
       },
        handleSetSize(item){
           this.isActiveSize=item
       },
       handleSkuShow() {
             this.changeSkuShow(false)
       },
       handleStopProp(e){
          e.stopPropagation();
       },
   },
}
 
</script>
 
<style lang="stylus" scoped>
 .sku
    position fixed
    width 100%
    height 100%
    background rgba(0,0,0,.7)
    top 0
    left 0
    z-index 2001
    .goods_info
        position absolute
        box-sizing border-box
        padding 0.15rem
        left 0
        bottom 0
        width 100%
        height 8rem
        overflow-y auto
        background #fff
        .sku_header
            position relative
            width 100%
            height 2rem
            line-height 0.4rem
            display flex
            .van-image
                width 2rem
                height 2rem
            .goods_header_info 
                text-align left
                padding-left 0.2rem
                box-sizing border-box
                flex 1
                .price
                    margin-top 0.4rem
                    color red
                    font-size 0.26rem
                .num
                    color #616161
                    font-size 0.24rem
                .state
                    color #616161
                    font-size 0.24rem
        .sku_main
            position relative
            width 100%
            margin-top 0.4rem
            margin-bottom 1.2rem
            p
                font-size 0.24rem
                color #616161
                position relative
                text-align left 
                span
                    display inline-block
                    box-sizing border-box
            .van-stepper
                width 2rem
                display inline-block
            ul
                display flex 
                flex-wrap wrap
                li
                    padding 0.08rem
                    color #616161
                    font-size 0.24rem
                    cursor pointer
                    line-height 0.2rem
                    box-sizing border-box
                    border 1px solid #ddd
                    border-radius 4px
                    margin-left 0.2rem
                    margin-top 0.1rem
                    margin-bottom 0.1rem
                .isActiveColor
                    border 1px solid red
                
                
            
</style>
